<template>
	<view>
		<!-- 选着提货方式 -->
		<view class="content">
			<view class="title">
				<view @tap="tap(index)" v-for="(item,index) in list" :key="index" :class="[current==index?'active':'']">
					{{item.title}}</view>
			</view>
			<view v-if="index==0" style="width: 100%;height: auto;">
				<view @click="address" style="margin-left: 3%; width: 95%;height: 10vh;margin-top: 20rpx;display: flex;border-bottom: #565 solid 1rpx;">
					<image src="/static/images/团长-位置.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;"></image>
					<view style="line-height: 10vh;margin-left: 3%;">
						收货地址:北京市海定区上帝五街456号 
					</view>
					<image src="/static/images/右箭头.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;margin-left: 9%;"></image>
				</view>
				<view style="margin-left: 3%; width: 95%;height: 10vh;margin-top: 20rpx;display: flex;">
					<view style="width: 60rpx;height: 60rpx;margin-top: 30rpx;line-height: 60rpx;text-align: center;border-radius: 50%;background-color: #18BC37;color: #fff;">
						门店
					</view>
					<view style="margin-left: 3%;width: 69%;margin-top: 20rpx;">
						收货地址:北京市海定区上帝五街456号 11111
					</view>
					<image src="/static/images/右箭头.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;margin-left: 9%;"></image>
				</view>
				<view style="margin-left: 6%;">
					<view style="font-size: 32rpx;">
						商品信息
					</view>
					<view style="margin-top: 20rpx;display: flex;">
						<image src="/static/images/秒杀活动-列表.png" style="width: 30%;height: 18vh;margin-right: 10rpx;"></image>
						<view style="">
							<view style="width: 75%;margin-top: 40rpx;">
								vivo X605G新品拍照智能手8GB+120GB
							</view>
							<view style="color: red;margin-top: 20rpx;">
								3980.00
							</view>
						</view>
					</view>
				</view>
				<view class="" @click="purchase">
					<button type="default" style="border-radius: 40rpx;background-color: red;margin-top: 200rpx; width: 95%;margin-left: 3%;color: #fff;">已选好商品，去结算</button>
				</view>
			</view>
			<view v-if="index==1">
				<view @click="address" style="margin-left: 3%; width: 95%;height: 10vh;margin-top: 20rpx;display: flex;border-bottom: #565 solid 1rpx;">
					<image src="/static/images/团长-位置.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;"></image>
					<view style="line-height: 10vh;margin-left: 3%;">
						收货地址:北京市海定区上帝五街456号 
					</view>
					<image src="/static/images/右箭头.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;margin-left: 9%;"></image>
				</view>
				<view style="margin-left: 3%; width: 95%;height: 10vh;margin-top: 20rpx;display: flex;">
					<view style="width: 60rpx;height: 60rpx;margin-top: 30rpx;line-height: 60rpx;text-align: center;border-radius: 50%;background-color: #18BC37;color: #fff;">
						团长
					</view>
					<view style="margin-left: 3%;width: 69%;margin-top: 20rpx;">
						收货地址:北京市海定区上帝五街456号 11111
					</view>
					<image src="/static/images/右箭头.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;margin-left: 9%;"></image>
				</view>
				<view style="margin-left: 6%;">
					<view style="font-size: 32rpx;">
						商品信息
					</view>
					<view style="margin-top: 20rpx;display: flex;">
						<image src="/static/images/秒杀活动-列表.png" style="width: 30%;height: 18vh;margin-right: 10rpx;"></image>
						<view style="">
							<view style="width: 75%;margin-top: 40rpx;">
								vivo X605G新品拍照智能手8GB+120GB
							</view>
							<view style="color: red;margin-top: 20rpx;">
								3980.00
							</view>
						</view>
					</view>
				</view>
				<view class="" @click="purchase">
					<button type="default" style="border-radius: 40rpx;background-color: red;margin-top: 200rpx; width: 95%;margin-left: 3%;color: #fff;">已选好商品，去结算</button>
				</view>
			</view>
			<view v-if="index==2">  
				<view @click="address" style="margin-left: 3%; width: 95%;height: 10vh;margin-top: 20rpx;display: flex;border-bottom: #565 solid 1rpx;">
					<image src="/static/images/团长-位置.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;"></image>
					<view style="line-height: 10vh;margin-left: 3%;">
						收货地址:北京市海定区上帝五街456号
					</view>
					<image src="/static/images/右箭头.png" style="width: 60rpx;height: 60rpx;margin-top: 30rpx;margin-left: 9%;"></image>
				</view>
				<view style="margin-left: 3%; width: 95%;height: 10vh;margin-top: 20rpx;display: flex;">
					
				</view>
				<view style="margin-left: 6%;">
					<view style="font-size: 32rpx;">
						商品信息
					</view>
					<view style="margin-top: 20rpx;display: flex;">
						<image src="/static/images/秒杀活动-列表.png" style="width: 30%;height: 18vh;margin-right: 10rpx;"></image>
						<view style="">
							<view style="width: 75%;margin-top: 40rpx;">
								vivo X605G新品拍照智能手8GB+120GB
							</view>
							<view style="color: red;margin-top: 20rpx;">
								3980.00
							</view>
						</view>
					</view>
				</view>
				<view class="" @click="purchase">
					<button type="default" style="border-radius: 40rpx;background-color: red;margin-top: 200rpx; width: 95%;margin-left: 3%;color: #fff;">已选好商品，去结算</button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				list: [{
						title: "到店自提"
					},
					{
						title: "团长拍送"
					},
					{
						title: "快递送货"
					}
				],
				index:1
			}
		},
		methods: {
			tap(index) {
			console.log(index)
			this.index = index
				this.current = index
			},
			// 我的收货地址
			address(){
				uni.navigateTo({
				    url: '/pages/home/SecKill-active/Product-details/settlement/Receiving-Address/Receiving-Address'
				});
			},
			// 结算
			purchase(){
				uni.navigateTo({
				    url: '/pages/home/SecKill-active/Product-details/evaluate/purchase/purchase'
				});
			}
		}
	}
</script>

<style lang="scss">
	
	.title {
		background-color: #FFFFFF;
		display: flex;
		border-bottom: 1px solid #DDDDDD;
		width: 100%;
		box-sizing: border-box;
		height: 80upx;
		font-size: 30upx;
		line-height: 80upx;
		text-align: center;

		view {
			height: 80upx;
			line-height: 80upx;
			padding: 0;
			display: block;
			width: 50%;
			border-radius: 0;
			border: none;

			&:after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.active {
		background: #2cdbab;
		color: #FFFFFF;
	}

	.content {
		background: #fff;
	}
</style>
